<template>
  <div class="app-container">
    <div class="card-container">
      <div class="card card-left" @click="handleCardClick(1)">
        <span class="text">集成看板</span>
      </div>
      <div class="card card-right" @click="handleCardClick(2)">
        <span class="text">APP看板</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  created() {
    console.info('ait index created');
  },
  methods: {
    handleCardClick(op){
      let queryParams={};
      let pathName='';
      if(op===1){
        //跳转 集成看板
        pathName='aitdashboard'
      }else if(op===2){
        //跳转 APP看板
        pathName='appdashboard'
      }
      // 参考 https://blog.csdn.net/qq_41206305/article/details/121494328
      // Vue this.$router.push() 获取不到params参数 https://blog.csdn.net/qq_59347596/article/details/130158869
      this.$router.push({
        // path: "/ait/aitconfig",
        name: pathName,
        params:{ queryParams },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  text-align: center;
  height: 100vh; /* 设置整个容器的高度为视口高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(240, 242, 245);
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 50px; /* 调整卡片之间的间距 */
}

.card {
  width: 200px; /* 设置卡片宽度 */
  height: 200px;
  color: gray;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #e8f4ff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 24px; /* 放大字体 */
  font-weight: bold; /* 加粗字体 */
  display: flex;
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  &:hover {
    cursor: pointer;
    box-shadow: 0 2px 12px 0 brown;
    .text{
      // font-weight: bold;
      color: black;
    }
  }
}
</style>



